<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="addDialogVisible"
    width="25%"
    :before-close="beforeCloseDialog"
    @open="openDialog"
  >
    <el-form :model="params" ref="params" label-position="left" :rules="rules">
      <el-form-item size="small" prop="username">
        <el-input
          v-model="params.username"
          autocomplete="off"
          size="mini"
          maxlength="20"
          prefix-icon="fa fa-user"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="password" v-if="operation==='ADD'">
        <el-input
          v-model="params.password"
          autocomplete="off"
          size="mini"
          maxlength="20"
          prefix-icon="fa fa-key"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="phone">
        <el-input
          v-model="params.phone"
          autocomplete="off"
          size="mini"
          maxlength="11"
          prefix-icon="fa fa-mobile"
        ></el-input>
      </el-form-item>
      <el-form-item size="small" prop="email">
        <el-input
          v-model="params.email"
          autocomplete="off"
          size="mini"
          maxlength="20"
          prefix-icon="fa fa-envelope"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="cancelAdd" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirmAdd" size="mini"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {addUser, updateUser } from "@/components/api/security";
import Constants from "@/components/util/Constants";
import GlobalUtil from "@/components/util/GlobalUtil";
import md5 from 'js-md5';

export default {
  name: "AddUserInfo",
  props: {
    //接收父组件参数
    addDialogVisible: Boolean,
    userInfoParam: Object,
    dialogTitle: String,
    operation: String,
  },
  data() {
    return {
      params: {
        uuid: "",
        username: "",
        password:"",
        phone: "",
        email: "",
      },
      rules: {
        username: [
          {
            required: true,
            min: 5,
            max: 10,
            message: "输入用户名,长度在5-20个字符",
            trigger: "blur",
          },
        ],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur"}],
        enableFlag: [
          {
            required: true,
            min: 1,
            max: 2,
            message: "请选择字典是否有效",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    cancelAdd() {
      //注意：子组件不要更改父组件的变量，而是通过emit向上传递由父组件修改
      this.$emit("closeAddDialog");
    },
    confirmAdd() {
      this.$refs["params"].validate((valid) => {
        if (valid) {
          if (this.operation === Constants.ADD_STR) {
            this.params.password = md5(this.params.password);
            addUser(this.params, () => {
              this.$emit("closeAddDialog");
              this.$emit("search");
            });
          } else if (this.operation === Constants.UPDATE_STR) {
            updateUser(this.params, () => {
              this.$emit("closeAddDialog");
              this.$emit("search");
            });
          }
        }
      });
    },
    beforeCloseDialog() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$emit("closeAddDialog");
        })
        .catch((_) => {});
    },
    openDialog() {
      this.params = GlobalUtil.cloneObject(this.userInfoParam);
    },
  },
};
</script>
<style scoped>
.el-form-item {
  margin: 15px;
}
</style>